"use client";

import React, { useState, useEffect } from "react";
import { Form, Input, Button, Typography, Card, message } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import { useRouter } from "next/navigation";
import { createCaptcha } from "@/api/user";
import Image from "next/image";
import styles from "./index.module.scss";
import withAuth from "@/utils/withAuth";
const { Title } = Typography;

export default withAuth(function RegisterPage() {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm<{
    username: string;
    password: string;
    captcha: string;
  }>();
  const [captcha, setCaptcha] = useState<string>("");

  const onFinish = (values: {
    username: string;
    password: string;
    captcha: string;
  }) => {
    setLoading(true);
    console.log("注册信息:", values);
    message.success("注册成功！");
    router.push("/login");

    setLoading(false);
  };
  // 获取验证码
  const getCaptcha = async () => {
    const res = await createCaptcha({
      params: {
        scene: "login-by-pwd",
      },
    });
    setCaptcha(res.data.captchaBase64);
  };
  useEffect(() => {
    getCaptcha();
  }, []);

  return (
    <div className={styles.container}>
      <Card className={styles.loginCard}>
        <div className={styles.loginHeader}>
          <Title level={2}>欢迎注册</Title>
          <p>请输入您的账号和密码</p>
        </div>

        <Form
          form={form}
          name="login"
          initialValues={{
            remember: true,
            username: "admin",
            password: "123456",
          }}
          onFinish={onFinish}
          size="large"
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: "请输入用户名!" }]}
          >
            <Input prefix={<UserOutlined />} placeholder="用户名" />
          </Form.Item>

          <Form.Item
            name="password"
            rules={[{ required: true, message: "请输入密码!" }]}
          >
            <Input.Password prefix={<LockOutlined />} placeholder="密码" />
          </Form.Item>
          <Form.Item>
            {captcha ? (
              <Image
                src={captcha}
                alt="验证码"
                width={120}
                height={40}
                unoptimized={true}
                onClick={getCaptcha}
              />
            ) : (
              <Button onClick={getCaptcha} size="small" type="link">
                加载验证码
              </Button>
            )}
          </Form.Item>
          <Form.Item
            name="captcha"
            label="验证码"
            className="flex"
            rules={[{ required: true, message: "请输入验证码!" }]}
          >
            <Input placeholder="请输入验证码" />
          </Form.Item>

          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              className={styles.loginButton}
              loading={loading}
            >
              注册
            </Button>
            <div className={styles.registerLink}>
              已经有账号？<a href="/login">立即登录</a>
            </div>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
});
